<template>
  <section class="movice" style="margin-left: 5px;padding-top: 40px;">
    <md-card md-with-hover v-for="(item,index) in moviceList" :key="index" style="width:calc(50% - 15px);display: inline-block;margin-right: 12px;margin-top: 10px;">
      <md-card-media >
        <img :src="item.img" alt="People">
      </md-card-media>
      <md-card-actions>
        <md-button class="md-icon-eye" @click="mvDetails(item.id)">
          {{item.name}}
          <md-icon>favorite</md-icon>
        </md-button>
      </md-card-actions>
    </md-card>
  </section>
</template>
<script>
  export default {
    name:'movice',
    data(){
      return{
        moviceList:{}
      }
    },
    methods:{
      mvDetails(id){
        this.$router.push({path:"/home/moviceDetails/"+id});
      }
    },
    created(){
      this.$http.get("http://localhost:3000/movice")
        .then((response)=>{
           this.moviceList = response.body;
        })
    }
  }
</script>
<style>
  .rec-span{
    border-left:2px solid #D43C33;
    display:block;
    padding-left: 10px;
  }
  .left>img{
    width:52px;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .right{
    font-size: 16px;
    padding-left: 15px;
  }
  .fav-list{
    margin-top: 15px;
    margin-bottom: 15px;
  }

</style>
